<template>
    <div style="display: flex;flex-direction: row;flex-wrap: wrap;align-content: flex-start;min-height: 20px;position: relative;"
    :style="{
      'background': nodeModel.configDict.componentStyle.background,
      'width': nodeModel.configDict.componentStyle.width/2+'px',
      'flex-direction': nodeModel.configDict.componentStyle.flex_direction,
      'flex-wrap': nodeModel.configDict.componentStyle.flex_wrap,
      'overflow-x': 'scroll',
      'justify-content': nodeModel.configDict.componentStyle.justify_content,
      'align-items': nodeModel.configDict.componentStyle.align_items,
      'marginTop': nodeModel.configDict.componentStyle.marginTop/2+'px',
      'marginBottom': nodeModel.configDict.componentStyle.marginBottom/2+'px',
      'marginLeft': nodeModel.configDict.componentStyle.marginLeft/2+'px',
      'marginRight': nodeModel.configDict.componentStyle.marginRight/2+'px',
      'paddingTop': nodeModel.configDict.componentStyle.paddingTop/2+'px',
      'paddingBottom': nodeModel.configDict.componentStyle.paddingBottom/2+'px',
      'paddingLeft': nodeModel.configDict.componentStyle.paddingLeft/2+'px',
      'paddingRight': nodeModel.configDict.componentStyle.paddingRight/2+'px',
    }">
    <div v-if="nodeModel.configDict.itemStyle.isShowForText2 && nodeModel.configDict.itemStyle.isShowForText2ForPair" :style="{
      'background': nodeModel.configDict.itemStyle.backgroundForText2,
      'width': nodeModel.configDict.itemStyle.widthForText2/2 + 'px',
      'height': nodeModel.configDict.itemStyle.heightForText2/2 + 'px',
    }"></div>
    <div v-if="nodeModel.configDict.itemStyle.isShowForText1" :style="{
      'margin': nodeModel.configDict.componentStyle.flex_direction=='row'||nodeModel.configDict.componentStyle.flex_direction=='row-reverse' ? '0 ' + nodeModel.configDict.itemStyle.marginForText1/2+'px':'20px',
      'color': nodeModel.configDict.itemStyle.colorForText1,
      'font-size': nodeModel.configDict.itemStyle.fontsizeForText1/2 + 'px',
      'font-weight': nodeModel.configDict.itemStyle.fontweightForText1,
    }">{{nodeModel.configDict.itemStyle.text1}}</div>
    <div v-if="nodeModel.configDict.itemStyle.isShowForText2" :style="{
      'background': nodeModel.configDict.itemStyle.backgroundForText2,
      'width': nodeModel.configDict.itemStyle.widthForText2/2 + 'px',
      'height': nodeModel.configDict.itemStyle.heightForText2/2 + 'px',
    }"></div>
    <!-- 更多按钮 -->
    <div v-if="nodeModel.configDict.itemStyle.isShowForBtn1" style="position: absolute;right: 20px;"
    :style="{
      'color': nodeModel.configDict.itemStyle.colorForBtn1,
      'font-size': nodeModel.configDict.itemStyle.fontsizeForBtn1/2 + 'px',
    }">{{ nodeModel.configDict.itemStyle.titleForBtn1 }}<i class="el-icon-arrow-right"></i></div>
  </div>
</template>
<script>
  export default {
    components: {
        
    },
    props:{
      nodeModel:{
        type: Object,
        default: res=>{}
      },
    },
    data() {
      return {
        
      }
    },
    methods:{
        
    }
  }
</script>

<style lang="scss" scoped>

</style>